<template>
  <div class="filter-sheet-box">
    <el-dialog
      title="过滤表格"
      :visible.sync="filterSheetBoxVisible"
      :close-on-click-modal="false"
      :show-close="false"
      :modal-append-to-body="false"
      width="80%"
    >
      <div style="display:flex;">
        <div style="width: 70%">
          <el-table :data="data" border style="width: 100%" height="250" :key="tableKey">
            <el-table-column
              v-for="(column, index) in columns"
              :key="column"
              :prop="column"
              :label="column"
              width="180"
            >
              <template slot="header">
                <div class="table-header">
                  <span class="info">
                    <span>
                      <img v-show="hasNumber(index-1)" src="@/assets/image/filter/number.png" />
                    </span>
                    <span v-show="hasObj(index-1)">
                      <img src="@/assets/image/filter/text.png" />
                    </span>
                    <span v-show="hasDatetime(index-1)">
                      <img src="@/assets/image/filter/date.png" />
                    </span>
                    {{column}}
                  </span>
                  <filter-sheet-field-more-box
                    :index="index"
                    :type="types[index-1]"
                    :types="types"
                    :column="column"
                    :columns="columns"
                    :sheetName="sheetName"
                    :values="columnValues[column]"
                    :filterBoxVisible="filterBoxVisible"
                    :conditionList="conditionList"
                    v-on:reset-table="resetTable"
                    v-on:set-filter-box-visible="setFilterBoxVisble"
                    v-on:append-condition="appendCondition"
                    v-on:set-record="setRecord"
                    v-on:set-types="setTypes"
                  ></filter-sheet-field-more-box>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="flex:1;">
          <filter-records :filterRecordsList="filterRecordsList"></filter-records>
        </div>
      </div>
      <filter-box
        :filterBoxVisible="filterBoxVisible"
        :conditionList="conditionList"
        :types="types"
        :columns="columns"
        :columnValues="columnValues"
        :sheetName="sheetName"
        v-on:set-filter-box-visble="setFilterBoxVisble"
        v-on:set-condition="setCondition"
        v-on:append-condition="appendCondition"
        v-on:remove-condition="removeCondition"
        v-on:reset-table="resetTable"
        v-on:set-record="setRecord"
      ></filter-box>
      <span slot="footer" class="dialog-footer">
        <el-button style="float:left;" @click="resetFilter">重置</el-button>
        <el-button @click="setFilterSheetBoxVisible(false)">取 消</el-button>
        <el-button type="primary" @click="filter">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import FilterSheetFieldMoreBox from "@/components/FilterSheetFieldMoreBox.vue";
import FilterRecords from "@/components/FilterRecords.vue";
import FilterBox from "@/components/Filter.vue";
import Vue from "vue";

export default {
  components: {
    FilterSheetFieldMoreBox,
    FilterRecords,
    FilterBox,
  },
  props: ["filterSheetBoxVisible", "sheetName"],
  data() {
    return {
      data: [],
      columns: [],
      types: [],
      tableKey:0,
      filterBoxVisible: false,
      filterRecordsList: [
        "原始数据",
        "删除前列",
        "删除后列",
        "删除后列",
        "删除后列",
        "删除后列",
        "删除后列",
        "删除后列",
        "删除后列",
        "删除后列",
        "删除后列",
        "删除后列",
      ],
      conditionList: [],
      json: "",
      columnValues: {},
    };
  },
  computed: {
    hasNumber() {
      return function (index) {
        let numberTypes = [
          "int64",
          "int32",
          "int16",
          "int8",
          "float64",
          "float32",
        ];

        for (let numberType of numberTypes) {
          if (this.types[index] == numberType) return true;
        }
        return false;
      };
    },
    hasObj() {
      return function (index) {
        let objTypes = ["object", "category"];
        for (let objType of objTypes) {
          if (this.types[index] == objType) return true;
        }
        return false;
      };
    },
    hasDatetime() {
      return function (index) {
        let datetimeTypes = ["datetime64[ns]"];
        for (let datetimeType of datetimeTypes) {
          if (this.types[index] == datetimeType) return true;
        }
        return false;
      };
    },
    loadSheetList() {
      let loadSheetListJson = this.$store.state.loadSheet.loadSheetList;

      return JSON.stringify(loadSheetListJson);
    },
    theColumns() {
      let loadSheet = null;

      for (let ls of this.loadSheetList)
        if (ls == this.sheetName) loadSheet = ls;

      if (!loadSheet) return null;

      return loadSheet.columns;
    },
  },
  watch: {
    loadSheetList: {
      handler: function (n, o) {
        let newLoadSheetList = JSON.parse(n);
        let oldLoadSheetList = JSON.parse(o);

        let oldColumns = [];
        let newColumns = [];

        for (let loadSheet of newLoadSheetList) {
          if (loadSheet.showName == this.sheetName)
            oldColumns = loadSheet.columns;
        }

        for (let loadSheet of oldLoadSheetList) {
          if (loadSheet.showName == this.sheetName)
            newColumns = loadSheet.columns;
        }

        if (oldColumns.toString() != newColumns.toString()) {
          this.getFilterContainer();
        }
      },
      deep: true,
    },
  },
  methods: {
    setFilterSheetBoxVisible(val) {
      this.$emit("set-filter-sheet-box-visible", val);
    },
    setFilterBoxVisble(val) {
      this.filterBoxVisible = val;
    },
    setCondition(index, condition) {
      this.conditionList[index] = condition;
    },
    setRecord(record) {
      this.filterRecordsList = record;
    },
    setTypes(index, type) {
      Vue.set(this.types, index, type);
      // this.columns.push("hhhh")
      // this.columns.splice(this.columns.length-1, 1)
      ++this.tableKey
      this.$forceUpdate();
    },
    appendCondition(condition) {
      this.conditionList.push(condition);
    },
    removeCondition(index) {
      if (this.conditionList.length == 1) {
        return;
      }
      this.conditionList.splice(index, 1);
    },
    clearConditionList() {
      this.conditionList = [];
    },
    resetTable(data) {
      this.columns = [];
      this.data = [];
      this.formateConversion(data);
    },
    getFilterContainer() {
      let data = {
        sheet_name: this.sheetName,
      };
      this.$axios.post("/filter/getContainer", data).then((res) => {
        if (res.code == 200) {
          // console.log(res.data)

          this.columnValues = res.data.data;
          // console.log(this.columnValues)
          this.json = res.data.json;
          this.filterRecordsList = res.data.record;
          this.types = res.data.types;
          let data = JSON.parse(this.json);
          this.formateConversion(data);
        }
      });
    },
    formateConversion(data) {
      // this.columns = this.columns.concat(data.columns);
      this.columns = data.columns;
      let columns = this.columns;

      let list = [];

      for (let i = 0; i < data.data.length; i++) {
        let obj = {};
        for (let j = 0; j < data.data[i].length; j++) {
          obj[columns[j]] = data.data[i][j];
        }
        obj["index"] = data.index[i];
        list.push(obj);
      }

      this.columns.splice(0, 0, "index");
      // this.data = this.data.concat(list);
      this.data = list;
    },
    filter() {
      let data = {
        sheet_name: this.sheetName,
      };

      this.$axios.post("/filter/save", data).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.filterRecordsList = res.data.record;

          this.setFilterSheetBoxVisible(false);
        } else this.$message.error(res.msg);
      });
    },
    resetFilter() {
      let data = {
        sheet_name: this.sheetName,
      };
      this.$axios.post("/filter/resetFilter", data).then((res) => {
        if (res.code == 200) {
          let data = JSON.parse(res.data.json);
          this.resetTable(data);
          this.filterRecordsList = res.data.record;
          this.types = res.data.types
          ++this.tableKey
          this.$message({
            type: "success",
            message: "重置成功",
          });
        }
      });
    },
  },

  created() {
    this.getFilterContainer();
  },
};
</script>

<style>
.table-header {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}

.table-header > .info {
  display: flex;
  align-content: center;
  align-items: center;
}

.table-header > .info > span {
  display: flex;
  align-items: center;
}

/* .filter-sheet-box .el-table__footer-wrapper,
.filter-sheet-box .cell,
.filter-sheet-box .el-table__header-wrapper,
.filter-sheet-box .el-table th {
  overflow: unset;
} */

.table-header img {
  width: 20px;
  height: 20px;
}
</style>